<template>
  <div class="bg-neutral-100" v-if="route.path !== '/login'">
    <!-- Main Footer Content -->
    <div class="flex justify-center w-full">
      <div class="px-20 py-16 flex w-full max-w-screen-xl min-w-[1152px]">
        <!-- Company Info Section -->
        <div class="w-[400px] mr-20 shrink-0">
          <img
            class="w-[100px] h-auto object-contain"
            src="@/assets/logo.jpg"
            alt="公司logo"
          />
          <h2 class="mt-6 text-xl font-medium text-gray-800">
            让创意更有价值，让世界更生动
          </h2>
          <p class="mt-4 text-gray-600 leading-relaxed">
            我们相信，通过平台的效率和体验优化，搭建良性创作环境，就能源源不断输出好的数字创意作品，让世界更生动！
          </p>
          <p class="mt-6 text-gray-500 text-sm">© 2012 - 2024</p>

          <!-- Social Media Section -->
          <div class="grid grid-cols-5 gap-4 mt-10">
            <v-menu
              v-for="(item, index) in shareList"
              :key="index"
              open-on-hover
              location="top"
            >
              <template v-slot:activator="{ props: menu }">
                <v-btn
                  v-bind="menu"
                  icon
                  elevation="0"
                  class="transition-transform duration-200 hover:scale-110"
                >
                  <img :src="item.svg" :alt="'社交媒体图标 ' + (index + 1)" />
                </v-btn>
              </template>
              <div class="p-4 bg-white rounded-lg shadow-lg">
                <img
                  :src="item.image"
                  :alt="'二维码 ' + (index + 1)"
                  class="w-32 h-32"
                />
              </div>
            </v-menu>
          </div>
        </div>

        <!-- Categories Section -->
        <div class="flex-1 flex justify-between">
          <div
            v-for="item in AppStore.materialCategory"
            :key="item.id"
            class="flex flex-col space-y-4"
          >
            <div
              @click="navigateToCategory(item)"
              class="font-medium text-gray-800 hover:text-gray-600 cursor-pointer transition-colors duration-200"
            >
              {{ item.name }}
            </div>

            <a
              v-for="second_categories in item.second_categories"
              :key="second_categories.id"
              @click="
                router.push(
                  `/categoryList?categoryId=${item.id}&id=${second_categories.id}`
                )
              "
              class="text-gray-600 hover:text-gray-800 hover:underline cursor-pointer transition-colors duration-200"
            >
              {{ second_categories.name }}
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Bottom Bar -->
    <div class="bg-black py-3 px-5">
      <div
        class="max-w-screen-xl mx-auto flex justify-center items-center flex-wrap gap-6"
      >
        <a
          href="http://beian.miit.gov.cn/"
          target="_blank"
          rel="nofollow"
          class="text-gray-300 hover:text-white text-xs transition-colors duration-200"
        >
          蜀ICP备2025117734号-1
        </a>
        <!-- <a
          href="http://www.beian.gov.cn/portal/registerSystemInfo"
          target="_blank"
          rel="nofollow"
          class="text-gray-300 hover:text-white text-xs transition-colors duration-200"
        >
          川公网安备***********
        </a> -->
        <!-- <a
          href="https://www.vjshi.com/jubao"
          target="_blank"
          rel="nofollow"
          class="text-gray-300 hover:text-white text-xs transition-colors duration-200"
        >
          违法和不良信息举报中心
        </a> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { useAppStore } from "@/stores/app";
import { useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();
const AppStore = useAppStore();
const shareList = [];

const navigateToCategory = (item) => {
  AppStore.activeMaterialCategory = item.id;
  router.push({
    name: "categoryList",
    query: { categoryId: item.id },
  });
};
</script>

<style scoped>
/* Add any additional custom styles here if needed */
</style>
